<template>
    <div id="app" class="app">
        <add></add>
        <div class="title_list">
            <router-link class="router_link" to="/book">书籍</router-link>
            <router-link class="router_link" to="/movie">电影</router-link>
            <router-link class="router_link" to="/game">游戏</router-link>
            <router-link class="router_link" to="/variety">综艺</router-link>
            <router-link class="router_link" to="/sports">体育</router-link>
        </div>
        <keep-alive>
            <router-view/>
        </keep-alive>
    </div>
</template>
<script>
import Add from "./components/Add"
export default {
    components: {
        Add
    }
}
</script>
<style lang="scss">
.app {
    margin: 100px auto;
    width: 600px;
    background-color: #eee;
    .title_list{
        height: 50px;
        .router_link{
            float: left;
            width: 80px;
            height: 50px;
            line-height: 50px;
            font-weight: 900;
            text-align: center;
            color: rgb(36, 234, 171);
            background-color: rgb(29, 159, 192);
            text-decoration: none;
            &.router-link-active{
                color: #fff;
                background-color: rgb(125, 243, 237);
            }
        }
    }
}
</style>
